<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/main' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品分类</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card class="box-card">
      <el-button
        type="primary"
        style="margin-bottom: 10px"
        @click="
          addCatDialog = true;
          getCates2();
        "
        >添加分类</el-button
      >
      <el-table
        :data="tableData"
        style="width: 100%; margin-bottom: 20px"
        border
        row-key="cat_id"
      >
        <el-table-column type="index" label="#" width="50px">
          <template slot-scope="{ row }">
            <span v-if="getFirst.indexOf(row) != -1">
              {{ getFirst.indexOf(row) + 1 }}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="cat_name" label="分类名称" width="309px">
        </el-table-column>
        <el-table-column label="是否有效" width="320px">
          <template slot-scope="{ row: { cat_deleted } }">
            <i
              v-if="!cat_deleted"
              class="el-icon-success"
              style="color: #42cd32"
            ></i>
            <i v-else class="el-icon-error" style="color: red"></i>
          </template>
        </el-table-column>
        <el-table-column label="排序" width="320px">
          <template slot-scope="{ row: { cat_level } }">
            <el-tag v-if="cat_level == 0">{{ level_arr[cat_level] }}</el-tag>
            <el-tag v-else-if="cat_level == 1" type="success">{{
              level_arr[cat_level]
            }}</el-tag>
            <el-tag v-else-if="cat_level == 2" type="danger">{{
              level_arr[cat_level]
            }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200px">
          <template slot-scope="{ row }">
            <el-button
              type="primary"
              size="small"
              @click="
                editCatDialog = true;
                openEdit(row);
              "
              ><i class="el-icon-edit"></i>编辑</el-button
            >
            <el-button type="danger" size="small" @click="delCat(row)"
              ><i class="el-icon-delete"></i>删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="query.pagenum"
        :page-sizes="[2, 4, 6, 8]"
        :page-size="query.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        style="margin-top: 20px"
      >
      </el-pagination>
    </el-card>

    <el-dialog title="添加分类" :visible.sync="addCatDialog" width="50%">
      <el-form>
        <el-form-item label="分类名称">
          <el-input v-model="addCatData.cat_name"></el-input>
        </el-form-item>
        <el-form-item label="父类层级">
          <el-cascader
            :options="selectData"
            v-model="addCatData.cat_pid"
            :props="{ checkStrictly: true, value: 'cat_id', label: 'cat_name' }"
            clearable
            @change="getValue"
          >
          </el-cascader>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addCatDialog = false">取 消</el-button>
        <el-button
          type="primary"
          @click="
            addCatDialog = false;
            addCate();
          "
          >确 定</el-button
        >
      </span>
    </el-dialog>

    <!-- 编辑对话框 -->
    <el-dialog title="修改分类" :visible.sync="editCatDialog" width="50%">
      <el-form>
        <el-form-item label="分类名称">
          <el-input v-model="editCatData.cat_name"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editCatDialog = false">取 消</el-button>
        <el-button
          type="primary"
          @click="
            editCatDialog = false;
            editCate();
          "
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
  <script>
export default {
  data() {
    return {
      // 添加分类对话框开关
      addCatDialog: false,
      // 编辑分类对话框开关
      editCatDialog: false,
      query: {
        //每页几条
        pagesize: 4,
        //当前第几页
        pagenum: 1,
      },
      addCatData: {
        cat_name: "",
        cat_pid: 0,
        cat_level: 0,
      },
      editCatData: {
        cat_id: "",
        cat_name: "",
      },
      total: 5,
      tableData: [],
      selectData: [],
      level_arr: ["一级", "二级", "三级"],
    };
  },
  methods: {
    async addCate() {
      const {
        data: { meta },
      } = await this.$http.post("categories", this.addCatData);
      if (meta.status !== 201) return this.$message.error("添加分类失败");
      this.$message.success("添加分类成功");
      this.list();
    },
    // 当级联下拉框选项改变时触发
    getValue(v) {
      if (v.length !== 0) {
        console.log(v);
        // 父id的处理，只需要取数组的最后一个元素   数组。length-1
        this.addCatData.cat_pid = v[v.length - 1];
        // 级别的处理
        this.addCatData.cat_level = v.length;
      } else {
        // 添加一级分类处理
        this.addCatData.cat_pid = 0;
        this.addCatData.cat_level = 0;
      }
    },
    handleSizeChange(val) {
      this.query.pagesize = val;
      this.list();
    },
    handleCurrentChange(val) {
      this.query.pagenum = val;
      this.list();
    },
    openEdit(row) {
      this.editCatData.cat_id = row.cat_id;
      this.editCatData.cat_name = row.cat_name;
    },
    async editCate() {
      const { data } = await this.$http.put(
        `categories/${this.editCatData.cat_id}`,
        this.editCatData
      );
      this.list();
    },
    async list() {
      let {
        data: {
          data: { total, result },
          meta,
        },
      } = await this.$http.get("categories", { params: this.query });
      if (meta.status !== 200) return this.$message.error("获取分类列表失败");
      this.tableData = result;
      this.total = total;
    },
    async getCates2() {
      const {
        data: { data, meta },
      } = await this.$http("categories", { params: { type: 2 } });
      if (meta.status !== 200) this.$message.error("获取分类列表失败");
      this.selectData = data;
    },
    async delCat(row) {
      const {
        data: { meta },
      } = await this.$http.delete(`categories/${row.cat_id}`);
      if (meta.status !== 200) this.$message.error("删除分类失败");
      this.$message.success("删除分类成功");
      this.list();
    },
  },

  computed: {
    getFirst() {
      // 把所有分类里的第一级筛选出来
      return this.tableData.filter((item) => item.cat_level == 0);
    },
  },
  created() {
    this.list();
  },
};
</script>